<template>
  <div id="mychart" :style="myChartStyle" class="echart"></div>
</template>

<script>
import * as echarts from "echarts";

require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  props: {
    chargeOrderCountMapList: {
      type: Array,
      required: true
    },
    faultCountMapList: {
      type: Array,
      required: true
    },
    heartCountMapList: {
      type: Array,
      required: true
    },
  },
  data() {
    return {
      myChart: {},
      pieName: [],
      myChartStyle: {float: "left", width: "750px", height: "600px"} //图表样式
    };
  },
  watch: {
    chargeOrderCountMapList: {
      deep: true,
      handler(val) {
        this.initEcharts(val);
      }
    },
    faultCountMapList: {
      deep: true,
      handler(val) {
        this.initEcharts(val);
      }
    },
    heartCountMapList: {
      deep: true,
      handler(val) {
        this.initEcharts(val);
      }
    }
  },
  beforeDestroy() {
    if (!this.myChart) {
      return
    }
    this.myChart = null
  },
  mounted() {
    this.$nextTick(() => {
      this.initEcharts(); //数据初始化
    })
  },
  methods: {
    initEcharts() {
      // 饼图
      const option = {
        title: [
          {
            top: 0,
            left: 'center',
            text: '订单数',
            textStyle:{color:'#FFA383'}
          },
          {
            top: 180,
            left: 'center',
            text: '故障数'
          },
          {
            top: 360,
            left: 'center',
            text: '心跳次数',
            textStyle:{color:'#A3B5A9'}
          },
        ],
        tooltip: {
          formatter: function (p) {
            const format = echarts.time.format(p.data[0], '{yyyy}-{MM}-{dd}', false);
            return format + ': ' + p.data[1];
          }
        },
        visualMap: [
          {
            min: 0,
            max: 100,
            type: 'piecewise',
            orient: 'horizontal',
            seriesIndex:0,
            left: 'center',
            top: 30,
            inRange: {
              //红色色系
              color:[ '#FFE9BB', '#FFD1A7', '#FFBB95', '#FFA383', '#FF8D70', '#FF745C', '#FF5C4A', '#FF4638', '#FF2E26', '#FF1812']
            }
          },
          {
            seriesIndex:1,
            min: 0,
            max: 100,
            type: 'piecewise',
            orient: 'horizontal',
            left: 'center',
            top: 210,
            /*inRange: {
              //红蓝相间
              color:['#5A8BC7', '#7E9FB9', '#A3B5A9', '#C9CB9D', '#ECE191', '#FEDC88', '#FCC080', '#FBA279', '#F98673', '#F7676C']
            }*/
          },
          {
            seriesIndex:2,
            min: 0,
            max: 1,
            type: 'piecewise',
            orient: 'horizontal',
            left: 'center',
            top: 390,
            inRange: {
              //红蓝相间
              color:['#5A8BC7', '#7E9FB9', '#A3B5A9', '#C9CB9D', '#ECE191', '#FEDC88', '#FCC080', '#FBA279', '#F98673', '#F7676C']
            }
          }
        ],
        calendar: [
          {
            calendarIndex:0,
            top: 80,
            left: 30,
            right: 30,
            cellSize: ['auto', 13],
            range: this.chargeOrderCountMapList[0][0].substr(0, 4),
            itemStyle: {
              borderWidth: 0.5
            },
            yearLabel: { show: false }
          },
          {
            calendarIndex: 1,
            top: 260,
            left: 30,
            right: 30,
            cellSize: ['auto', 13],
            range: this.faultCountMapList[0][0].substr(0, 4),
            itemStyle: {
              borderWidth: 0.5
            },
            yearLabel: { show: false }
          },
          {
            calendarIndex: 2,
            top: 430,
            left: 30,
            right: 30,
            cellSize: ['auto', 13],
            range: this.heartCountMapList[0][0].substr(0, 4),
            itemStyle: {
              borderWidth: 0.5
            },
            yearLabel: { show: true }
          },
        ],
        series: [
          {
            type: 'heatmap',
            coordinateSystem: 'calendar',
            calendarIndex: 0,
            data: this.chargeOrderCountMapList
          },
          {
            type: 'heatmap',
            coordinateSystem: 'calendar',
            calendarIndex: 1,
            data: this.faultCountMapList
          },
          {
            type: 'heatmap',
            coordinateSystem: 'calendar',
            calendarIndex: 2,
            data: this.heartCountMapList
          },
        ]
      };
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption(option);
    }
  }
};
</script>
